<template>
  <div class="c-bg-sgray c-p">
    <div>
      <div class="c-ph24 c-flex-row c-aligni-center c-justify-sb c-hh80 c-p c-pz8 c-bg-sgray c-mb10">
        <div class="c-fs22 c-fc-sblack">共{{totalCount}}个内容</div>
      </div>
      <div :class="showSearchBar ? 'c-pt24' : ''" class="c-ph24">
        <div v-for="(item, index) in interestList" :key="index" @click.stop="goDetail(item, item.prodId, item.prodType, item.courseType)" class="c-bg-white c-br12 c-ph24 c-pv24 c-mb24">
          <div class="c-flex-row" :class="item.ext ? 'c-pb20' : ''">
            <div class="c-ww180 c-hh120 c-text-hidden c-br10 c-p ">
              <div class="xiaoe-image__backdrop" :style="{backgroundImage: 'url(' + (!!item.cover ? item.cover : ((item.prodType == 42 || item.prodType == 43 || item.prodType == 44) ? require('../../../assets/agentApply.png') : ((item.prodType == 8 && !item.avatar) ? require('@/assets/i/wap/datum/datumsDefault.png') : require('../../../assets/defult270.png'))))+')'}"></div>
              <img class="c-w100 c-h c-br12 xiaoe-image__top-image" :src="!!item.cover ? item.cover : (item.prodType == 42 || item.prodType == 43 || item.prodType == 44) ? require('../../../assets/agentApply.png') : (item.prodType == 8 && !item.avatar) ? require('@/assets/i/wap/datum/datumsDefault.png') : require('../../../assets/defult270.png')" alt="">
              <div class="c-br8 c-hh28 c-ph6 c-textAlign-c c-translucent-balck60 c-fs18 c-fc-white c-pa c-p-b8 c-p-r8" v-if="prodType[item.prodType]">{{item.prodType==5?prodTypeCourse[item.childType]:prodType[item.prodType]}}</div>
              <div class="c-translucent-white50 c-ww180 c-h c-pa c-p-b0 c-p-r0" v-if="item.prodStatus==0||item.hasPermission==false">
                <div class="c-br8 c-hh28 c-ph6 c-textAlign-c c-translucent-balck60 c-fs18 c-fc-white c-pa c-p-b8 c-p-r8">已失效</div>
              </div>
            </div>
            <div class="c-flex-column c-justify-sb c-flex-grow1 c-ml20">
              <div class="c-flex-row c-justify-sb">
                <div class="c-fs24 c-fw500 c-text-ellipsis2 c-ww300" :class="item.prodStatus==0||item.hasPermission==false?'c-fc-sgray':'c-fc-xblack'">{{item.name}}</div>
              </div>
              <div class="c-w100 c-flex-row c-aligni-center c-justify-end">
                <div class="c-pv8 c-ph30 c-fs22 theme-bd1 theme-fc c-br32" @click.stop="addBucket(item)">恢复</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (interestList && interestList.length > 0)" :noData="!interestList || interestList.length == 0" :noDataText="'暂无内容'"></loading-status-tem>
    </div>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
import { goDetails } from "@/utils/goDetails.js";
let pageIndex = 1;
export default {
  name: "InterestIndex",
  components: {
    loadingStatusTem,
  },
  props: [],
  beforeCreate() { },
  data() {
    return {
      isShowApp: localStorage.getItem("useLvYueApp") || 0,
      enableGuideSet: localStorage.getItem("enableGuideSet") || -1,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
      is_page: false,
      page: 1,
      limit: 10,
      searchText: "",
      interestList: [],
      isLoading: false,
      prodType: {
        1: 'VIP',
        5: '课程',
        7: '活动',
        8: '资料',
        9: '专栏',
        10: '社群',
        11: '测评',
        15: '问答',
        23: 'SVIP',
        42: '服务商',
        43: '服务商',
        44: '服务商',
        51: '公开课',
        53: '约课',
        56: '词典',
        41: '打卡',
        61: '知识套餐',
        75: '互动测评',
        77: 'AI测评',
        78: '训练营',
        86: '预约',
        103: '内容专栏',
        115: '小班课',
        116: '教务系统',
        125: '考试',
        129: '练习',
        142: '电子书',
        180: '直播间',
        181: '圈子',
        185: '圈子主题'
      },
      prodTypeCourse: {
        0: '视频',
        1: '音频',
        2: '图文',
      },
      prodTypeMap: {
        '51': '公开课',
        '180': '直播间',
        '110': '视频',
        '111': '音频',
        '112': '图文',
        '9': '专栏',
        '61': '知识套餐',
        '142': '电子书',
      },
      acquireWay: {
        1: '普通订单',
        2: '拼团',
        4: '买赠',
        8: '限时购',
        12: '买赠',
        16: '好友助力',
        24: '手动添加',
        32: '兑换码',
        64: '系统赠送',
        128: '涨粉神器',
        256: '亲情卡',
        512: '普通订单',
        1024: '积分商城',
        2048: '大转盘',
        4096: '砍价',
        8192: '支付有礼',
        16384: '直播抽奖',
        32768: "直播福利",
        262144: "股东赠送",
        131072: "邀请活动奖励",
        524288: "实物带货",
        2097152: "团购",
        4194304: "推荐有礼",
        66048: "普通订单",
        65536: "普通订单",
        8388608: "礼包赠送",
        134217728: '搭配购',
        268435456: '直播预约奖励',
        1073741824: '免费',
        2147483648: 'VIP免费',
        4294967296: 'SVIP免费',
        8589934592: '服务商免费',
      },
      statusMap: {
        0: "预告",
        1: "正在直播",
        2: "回放",
        3: "直播已结束",
        4: "回放已过期"
      },
      statusClassName: {
        0: 'status-0',
        1: 'status-1',
        2: 'status-2',
        3: 'status-3',
        4: 'status-4',
      },
      statusIconName:{
        0: 'iconName-0',
        1: 'iconName-1',
        2: 'iconName-2',
        3: 'iconName-3',
        4: 'iconName-4',
      },
      showSearchBar: false,
      showSearchType: false,
      prodTypeArr: [{
        prodType: 0,
        name: '全部'
      }],
      prodTypeIndex: 0,
      chooseProdType: 0,
      totalCount: 0,
      tabList:[],
      typeBar:0,
      myInfo: {},
      custNameMap: [],
      prodTypeList: [],
      isShowProdType:false,
      chooseIndex:0,
      isCloum:true,
      isShow:false,
      info:''
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  computed: {},
  watch: {},
  methods: {
    goDetail: function(item) {
      let prodId = item.prodType == 7 ? item.activityId : item.prodId
      goDetails(this, item.prodType, prodId, '', item.childType || 0)
    },
    // 移出回收站
    addBucket(info) {
      utilJs.postMethod(global.apiurl + "marketingAward/subscribeBucket", {
        prodId: info.prodId,
        prodType: info.prodType,
        type: 0
      }, res => {
        pageIndex = 1;
        this.interestList = [];
        this.searchText = '';
        this.getMore();
        this.isShow = false
      })
    },
    // 我的回收站
    getMore() {
      if (!this.isLoading) {
        this.isLoading = true;
        utilJs.getMethod(global.apiurl + "marketingAward/subscribeBucketList?limit=" + this.limit + "&name=" + this.searchText + "&page=" + pageIndex + "&prodType=" + this.chooseProdType, res => {
          if (pageIndex == 1) {
            this.interestList = res.data;
            this.totalCount = res.total;
          } else {
            let list = res.data;
            this.interestList = this.interestList.concat(list);
          }
          pageIndex = res.data && (res.data.length >= this.limit) ? (pageIndex + 1) : pageIndex;//res.current_page < res.last_page ? pageIndex + 1 : pageIndex;
          this.is_page = res.data && (res.data.length >= this.limit) ? true : false;//res.current_page < res.last_page ? true : false;
          this.isLoading = false;
        });
      }
    },
    //下滑获取更多专栏
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getMore();
        }
      });
    }
  },
  activated() {
    setDocumentTitle("我的订阅");// eslint-disable-line
    this.is_page = false;
    pageIndex = 1;
    this.searchText = "";
    this.interestList = [];
    this.isLoading = false;
    this.getMore();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.loadingStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@function pxToRem($px) {
  //$rpx为需要转换的字号
  @return $px/40 + rem;
}
.icon-br{
  border-radius: 0.28rem 0 0.4rem 0;
}
.vip-top-bg {
  background: url("../../../assets/i/wap/vip/vip-intere-bg1.png");
  background-size: cover;
}
.vip-bg-img {
  background: url("../../../assets/i/wap/vip/vip-intere-bg2.png");
  background-size: cover;
}
.svip-bg-img {
  background: url("../../../assets/i/wap/vip/vip-intere-bg3.png");
  background-size: cover;
}
.c-mt-8{
  margin-top: -0.2rem;
}
.iconModeo{
  right: 0.2rem;
  top: 0.8rem;
}
.vipIcon{
  background-image: linear-gradient(90deg, #F4CE77 0%, #D49720 96%);
}
.svipIcon{
  background-image: linear-gradient(90deg, #F4CE77 0%, #D49720 96%);
}
.serverIcon{
  background-image: linear-gradient(90deg, #F4CE77 0%, #D49720 96%);
}
.status-0 {
  color: #F64163;
  background: rgba(246, 65, 99, .1);
}
.status-1 {
  color: #03BA50;
  background: rgba(3, 186, 80, .1);
}
.status-2 {
  color: #FF880E;
  background: rgba(255, 136, 14, .1);
}
.iconName-0 {
  background: #F64163;
}
.iconName-1 {
  background: #03BA50;
}
.iconName-2 {
  background: #FF880E;
}
.iconName-3,.iconName-4 {
  background: rgba(204, 204, 204, 0.5)
}
.status-3, .status-4{
  color: #999;
  background: rgba(153, 153, 153, .1);
}
.pillar{
  width: 1px;
  margin: 0 1px;
  height: pxToRem(4);
  background: #fff;
  border-radius: 5px;
  animation: pillarDance 2s infinite  ease;
}
.pillar:first-child{
  animation-delay:0.5s;
}
.pillar:nth-child(2){
  animation-delay:1s;
}
.pillar:nth-child(3){
  animation-delay:1.5s;
}
.free-end-txt{
  background: rgba(255,48,12,0.10);
}
@-webkit-keyframes pillarDance{
    0%{height:pxToRem(4);}
    50%{height:pxToRem(16);}
    100%{height:pxToRem(4);}
}
.xiaoe-image__backdrop {
  height: 100%;
  width: 100%;
  top: 0;
  position: absolute;
  background: hsla(0, 0%, 100%, 0.25) border-box;
  overflow: hidden;
  text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.3);
  -webkit-user-select: none;
  user-select: none;
  z-index: 0;
  background-position: center;
}
.xiaoe-image__top-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 7;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
</style>
